<template>
  <div class="todoapp">
    <TodoHeader
      @handleSubmit="handleSubmit"
      :Todos="Todos"
      @isAllDone="isAllDone"
    />
    <TodoMain
      :Todos="Todos"
      @changedone="changedone"
      @delById="delById"
      :status="status"
    />
    <TodoFooter
      :Todos="Todos"
      @changeStatus="changeStatus"
      :status="status"
      @clearDone="clearDone"
    />
  </div>
</template>

<script setup lang="ts">
import { Todo, Status } from "@/types";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
import { ref } from "@vue/reactivity";

const Todos = ref<Todo[]>([
  { id: 1, content: "吃饭", done: false },
  { id: 2, content: "学习", done: true },
  { id: 3, content: "上班", done: false },
]);

const status = ref<Status>("all");

const changedone = (id: number) => {
  const list = Todos.value.find((v) => v.id === id);
  if (list) list.done = !list?.done;
};

const delById = (id: number) => {
  const index = Todos.value.findIndex((v) => v.id === id);
  Todos.value.splice(index, 1);
};

const changeStatus = (type: Status) => {
  status.value = type;
};

const clearDone = () => {
  Todos.value = Todos.value.filter((item) => !item.done);
};

const handleSubmit = (content: Todo) => {
  Todos.value.push(content);
};

const isAllDone = (check: boolean) => {
  Todos.value = Todos.value.map((item) => ({ ...item, done: check }));
};
</script>